<template>
  <div class="listDemo-comp-ct">
    <mt-header title="列表demo" fixed>
      <mt-button icon="back" @click="$router.back(-1)" slot="left">返回</mt-button>
    </mt-header>
    <div class="container">
      <div class="list-container">
        <mt-loadmore
          :top-method="refreshe"
          :bottom-method="addMore"
          :bottom-all-loaded="allLoaded"
          ref="loadmore"
          :auto-fill="false"
        >
            <mt-cell  v-for="(item,idx) in listData" :key="idx" :title="item.title" :to="to_detail(idx)" :label="item.sub_title" is-link></mt-cell>
        </mt-loadmore>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  name: "listDemo",
  data() {
    return {
      listData: [],
      allLoaded: false
    };
  },
  methods: {
    refreshe() {
      console.log("refresh");
      this.$refs.loadmore.onTopLoaded();
    },
    addMore() {
      for (let i = 0; i < 5; i++) {
        this.listData.push({
          title: "new-" + (i + 1),
          sub_title: "new_subtitle"
        });
      }
      // this.allLoaded = true;//如果所有数据加载完可以设定该值使上拉方法失效防止误操作
      this.$refs.loadmore.onBottomLoaded();
    },
    to_detail(id) {
      return '/listDetail/'+id
    }
  },
  mounted() {
    for (var i = 0; i < 10; i++)
      this.listData.push({ title: "title-" + (i + 1), sub_title: "subtitle" });
  }
};
</script>
<style lang="scss" scoped>
.listDemo-comp-ct {
  .container {
    position: fixed;
    top: 40px;
    left: 0px;
    right: 0px;
    bottom: 0px;
    .list-container {
      height: 500px;
      overflow-y: auto;
      .info-list {
        list-style: none;
        margin-block-start: 0;
        margin-block-end: 0;
        padding-inline-start: inherit;
        margin-inline-start: 15px;
        margin-inline-end: 15px;
        .list-item {
          line-height: 15px;
          border-bottom: 1px solid silver 
        }
      }
    }
  }
}
</style>
